<template>
  <div class="tree-chat-content">
    <div class="tab-box">
      <div
        class="tab-item"
        @click="selectTab('sence')"
        :class="{ active: currentTab == 'sence' }"
      >
        治理场景
      </div>
      <div
        class="tab-item"
        @click="selectTab('area')"
        :class="{ active: currentTab == 'area' }"
      >
        管理责任
      </div>
    </div>
    <el-input
      v-model="keyword"
      style="width: 224px"
      placeholder="请输入查询的设备"
      :suffix-icon="Search"
    >
      <template #append>
        <el-icon color="#fff"><Search /></el-icon>
      </template>
    </el-input>
    <div class="l-list" :class="{ isbacklist: isback }">
      <!-- @check="checkTree" -->
      <el-tree
        v-if="currentTab == 'sence'"
        ref="treeRef"
        class="tree-select"
        style="width: 100%; min-width: fit-content"
        :data="treeData"
        show-checkbox
        :filter-node-method="filterNode"
        node-key="nodeId"
        highlight-current
        :props="defaultProps"
        @check="checkTree"
      />
      <el-tree
        v-if="currentTab == 'area'"
        ref="treeRef"
        class="tree-select"
        style="width: 100%; min-width: fit-content"
        :data="treeData"
        show-checkbox
        :filter-node-method="filterNode"
        node-key="nodeId"
        highlight-current
        :props="defaultProps"
        @check="checkTree"
      />
    </div>
    <div class="panel-btn" v-if="isback">
      <div class="selectTime" v-if="isback">
        <el-date-picker
          style="width: 100%; margin-bottom: 10px"
          v-model="backTime1"
          type="datetime"
          placeholder="开始时间"
        />
        <el-date-picker
          style="width: 100%; margin-bottom: 10px"
          v-model="backTime2"
          type="datetime"
          placeholder="结束时间"
        />
      </div>
      <div class="confirm-btn" @click="confirmPoint">确认选择</div>
    </div>
    <div>
      <ptz v-if="!isback" :did="currentCode" />
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { defineAsyncComponent, onMounted } from "vue";
import { getPointListZr } from "@/api/event.js";
import { getSencePointList } from "@/api/video.js";
import ptz from "@/components/video/ptz.vue";
const route = useRoute(); // 获取当前路由信息
const emit = defineEmits(["selectNode", "selectBackTime"]);

const props = defineProps({
  ptzCode: String,
});

const defaultProps = {
  children: "childrens",
  label: function (data, node) {
    return data.nodeName;
  },
};

let treeData = ref([]);

const getData = async () => {
  try {
    if (currentTab.value == "sence") {
      let { data } = await getSencePointList({});
      treeData.value = data.treeNodeList;
    } else {
      let { data } = await getPointListZr({});
      treeData.value = data.deviceOrgTree;
    }
  } catch (e) {
    console.error(e);
  }
};

let checkedKeys = ref([]);
let timer = null;

let currentTab = ref("sence");

const selectTab = (type) => {
  keyword.value = "";
  currentTab.value = type;
  getData();
};
let treeRef = ref();
let keyword = ref("");
watch(keyword, (val) => {
  treeRef.value.filter(val);
});

const filterNode = (value, data) => {
  if (!value) return true;
  return data.nodeName.includes(value);
};
let backTime1 = ref("");
let backTime2 = ref("");
let isback = ref(false);

let currentCode = ref("");

watch(
  () => props.ptzCode,
  (newval) => {
    currentCode.value = newval;
  },
  {
    deep: true,
    immediate: true,
  }
);

const confirmPoint = () => {
  let nodes = treeRef.value.getCheckedNodes();
  let list = [];
  nodes.forEach((element) => {
    if (element.tag) {
      // list.push(element.tag);
      list.push(element);
    }
  });
  if (list.length == 0) {
    currentCode.value = "";
    // ElMessage.error("请选择视频节点");
    emit("selectNode", []);
    return;
  }
  emit("selectNode", list);
  if (isback.value) {
    if (!backTime1.value || !backTime2.value) {
      ElMessage.error("请选择时间节点");
      return;
    }
    emit("selectBackTime", [
      new Date(backTime1.value).getTime() + "",
      new Date(backTime2.value).getTime() + "",
    ]);
  }
};
let timers = null;
const checkTree = (data, node) => {
  if (isback.value) return;
  if (timers) {
    clearTimeout(timers);
    timers = null;
  }
  timers = setTimeout(() => {
    confirmPoint();
  }, 300);
};

onMounted(() => {
  getData();
  if (route.params.type == "back") {
    isback.value = true;
  }
});

onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.tree-chat-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .l-list {
    margin-top: 26px;
    width: 100%;
    // height: calc(100% - 146px);
    flex: 1;
    overflow: auto;
    &.isbacklist {
      height: calc(100% - 226px);
    }
  }
}
</style>

<style lang="scss">
.tab-box {
  cursor: pointer;
  width: 224px;
  height: 32px;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  .tab-item {
    width: 50%;
    font-size: 14px;
    color: #2263bf;
    line-height: 32px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(70, 102, 149, 0.12);
    &.active {
      color: #fff;
      background: #2263bf;
      border-radius: 6px 0px 0px 6px;
      border-radius: 3px;
      border: 1px solid rgba(34, 99, 191, 0.09);
    }
  }
}
.tree-select {
  // width: 300px !important;
}
.el-input-group__append {
  width: 31px;
  background: #2263bf;
  padding: 0;
}
.panel-btn {
  padding-top: 10px;
}
</style>
